<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>易买网 - 首页</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/function.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="plugins/element-ui/element-ui.css">
	<script type="text/javascript" src="plugins/axios/axios.min.js"></script>
	<script type="text/javascript" src="scripts/request.js"></script>
	<!--设置分页插件颜色-->
	<style type="text/css">
		.pager > * {
			float: right;
		}

		.clearfix.is-background .el-pager li:not(.disabled).active {
			/*点击背景变成橙色*/
			background-color: #fc7e31;
		}

		.clearfix.is-background .el-pager li:hover {
			/*鼠标经过字变橙色*/
			color: #fc7e31 !important;
		}

		.clearfix.is-background .el-pager li.active {
			/*鼠标经过选中的字是白色*/
			color: white !important;
		}

		.el-select-dropdown__item.selected {
			color: #fc7e31 !important; /* 设置选中条目的背景色 */
		}

		.el-select .el-input.is-focus .el-input__inner {
			border-color: #ddc9b2 !important;
		}

		.el-pagination__sizes .el-input .el-input__inner:hover {
			border-color: #ddc9b2 !important;
		}

		.el-input__inner:focus {
			border-color: #ddc9b2 !important;
		}

		.el-textarea span {
			display: block !important;
			margin-right: 10px;
			background: rgba(0, 0, 0, 0) !important;
		}
	</style>
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo"><img src="images/logo.gif"/></div>
		<div class="help"><a href="shopping.html" class="shopping">购物车{{ this.shoppingCar.length }}件</a><a
				href="login.html">登录</a><a
				href="register.html">注册</a><a href="guestbook.html">留言</a><a href="manage/index.html">后台管理</a>
		</div>
		<div class="navbar">
			<ul class="clearfix">
				<li class="current"><a href="#">首页</a></li>
				<li><a href="#">图书</a></li>
				<li><a href="#">百货</a></li>
				<li><a href="#">品牌</a></li>
				<li><a href="#">促销</a></li>
			</ul>
		</div>
	</div>
	<div id="childNav">
		<div class="wrap">
			<ul class="clearfix">
				<li class="first"><a href="#">音乐</a></li>
				<li><a href="#">影视</a></li>
				<li><a href="#">少儿</a></li>
				<li><a href="#">动漫</a></li>
				<li><a href="#">小说</a></li>
				<li><a href="#">外语</a></li>
				<li><a href="#">数码相机</a></li>
				<li><a href="#">笔记本</a></li>
				<li><a href="#">羽绒服</a></li>
				<li><a href="#">秋冬靴</a></li>
				<li><a href="#">运动鞋</a></li>
				<li><a href="#">美容护肤</a></li>
				<li><a href="#">家纺用品</a></li>
				<li><a href="#">婴幼奶粉</a></li>
				<li><a href="#">饰品</a></li>
				<li class="last"><a href="#">Investor Relations</a></li>
			</ul>
		</div>
	</div>
	<div id="position" class="wrap">
		您现在的位置：<a href="index.html">易买网</a> &gt; 在线留言
	</div>
	<div id="main" class="wrap">
		<div class="lefter">
			<div class="box">
				<h2>商品分类</h2>
				<dl v-for="(item1, index) in parentList" :key="item1.id">
					<dt @click="toggleVisibility(index)">{{ item1.name }}</dt>
					<dd v-show="item1.visible" v-for="item2 in item1.subCategories" :key="item2.id">
						<a :href=`product-list.html?id=${item2.id}&pName=${item1.name}&sName=${item2.name}`>{{ item2.name
							}}</a>
					</dd>
				</dl>
			</div>
		</div>
		<div class="main" v-loading="loading">
			<div class="guestbook">
				<h2 style="cursor: pointer" onclick="window.location.href='index.html'">全部留言</h2>
				<ul>
					<li v-for="item in guestbookList" :key="item.id">
						<dl>
							<dt>{{ item.content }}</dt>
							<dd class="author">{{ item.userName }} <span class="timer">{{ item.createTime }}</span></dd>
							<dd v-if="item.userId === user.id">
								<i @click="userDelGuestbook(item)"
								   style="cursor: pointer"
								   class="el-icon-delete">
								</i></dd>
							<dd v-if="item.reply === null">回复：无</dd>
							<dd v-else>回复：{{ item.reply }}</dd>
							<dd>
								<hr>
							</dd>
						</dl>
					</li>

				</ul>
				<div class="clear"></div>
				<div class="pager">
					<el-pagination
							class="clearfix"
							background
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:page-sizes="[2, 5, 10, 15]"
							layout="sizes, prev, pager, next, jumper"
							:current-page="page.currentPage"
							:page-size="page.pageSize"
							:total="page.total">
					</el-pagination>
					<br><br>
				</div>
				<div id="reply-box">
					<form id="guestBook">
						<table>
							<tr>
								<td class="field">昵称：</td>
								<td><input class="text" type="text"
										   name="guestName"
										   disabled="disabled"
										   v-model="user.userId"
								></td>
							</tr>
							<tr>
								<td class="field">留言内容：</td>
								<td>
									<el-input
											type="textarea"
											placeholder="请输入内容"
											v-model="guestbook.content"
											maxlength="300"
											show-word-limit
									>
									</el-input>
									<span></span>
								</td>
							</tr>
							<tr>
								<td></td>
								<td><label class="ui-blue"><input type="submit" name="submit" value="提交留言"
																  @click.prevent="addGuestbook"/></label>
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
		Copyright &copy; 2013 项目组 All Rights Reserved. 京ICP证1000001号
	</div>
</div>

<script type="text/javascript" src="plugins/vue/vue.js"></script>
<script type="text/javascript" src="api/user.js"></script>
<script type="text/javascript" src="api/parentCategories.js"></script>
<script type="text/javascript" src="api/product.js"></script>
<script type="text/javascript" src="api/guestbook.js"></script>
<!-- 引入组件库 -->
<script type="text/javascript" src="plugins/element-ui/element-ui.js"></script>
<script type="text/javascript">
	const userInfo = JSON.parse(localStorage.getItem("userInfo"));
	const app = new Vue({
		el: '#app',
		data: {
			loading: false,
			shoppingCar: [],
			parentList: [],
			user: userInfo,
			page: {
				currentPage: 1,
				pageSize: 15,
				total: 100,
				name: ''
			},
			guestbook: {
				content: ''
			},
			guestbookList: []
		},
		async mounted() {
			await this.getParentCategories()
			this.parentList.forEach(item => {
				this.$set(item, 'visible', true);
			});
			await this.getPageList()
			this.shoppingCar = JSON.parse(sessionStorage.getItem("ordersDetailList")) === null ? [] : JSON.parse(sessionStorage.getItem("ordersDetailList"));
		},
		methods: {
			async getPageList() {
				this.loading = true
				const list = await guestbookPageApi(this.page.currentPage, this.page.pageSize, this.page.name);
				this.page.total = list.data.total

				this.guestbookList = list.data.records
				console.log(this.guestbookList)
				this.loading = false
			},
			async getParentCategories() {
				this.loading = true
				const list = await getParentCategoryAllList()
				this.parentList = list.data
				this.loading = false
			},
			toggleVisibility(index) {
				this.$set(this.parentList[index], 'visible', !this.parentList[index].visible);
			},
			async handleCurrentChange(page) {
				this.page.currentPage = page;
				await this.getPageList();
			},
			async handleSizeChange(size) {
				this.page.pageSize = size;
				await this.getPageList();
			},
			async addGuestbook() {
				this.loading = true
				if (this.guestbook.content.length < 10) {
					this.$message.error('留言字数太少，请输入至少10个字');
					this.loading = false
					return
				}
				this.guestbook.userId = this.user.id
				this.guestbook.userName = this.user.userId
				const resp = await addGuestbookApi(this.guestbook)
				if (resp.code === 1) {
					this.$message({
						message: '留言成功',
						type: 'success'
					});
					await this.getPageList()
					this.guestbook.content = ''
				} else {
					this.$message.error('留言失败，请重新尝试');
				}
				this.loading = false
			},
			async userDelGuestbook(guestbook) {
				this.loading = true
				if (confirm('确定要删除吗？')) {
					const resp = await userDelGuestbookApi(guestbook)
					if (resp.code === 1) {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						await this.getPageList()
					} else {
						this.$message.error('删除失败，请重新尝试');
					}
				}
				this.loading = false
			},
		}
	})
</script>
</body>
</html>
